import Form from './form';
import List from './list';
import styles from './index.module.less';
import { useEffect, useState } from 'react';
import { cleanObject, useDebounce } from '@/utils/index';
import * as qs from 'qs';

const Experiment: React.FC<any> = () => {
  const [person, setPerson] = useState({
    name: '',
    personId: '',
  });
  const [users, setUsers] = useState([]);
  const [lists, setLists] = useState([]);
  const debouncedPerson = useDebounce(person, 2000);

  useEffect(() => {
    fetch(
      `http://localhost:3005/projects?${qs.stringify(
        cleanObject(debouncedPerson),
      )}`,
    ).then(async (result) => {
      if (result.ok) {
        setLists(await result.json());
      }
    });
  }, [debouncedPerson]);
  useEffect(() => {
    fetch(`http://localhost:3005/users`).then(async (result) => {
      if (result.ok) {
        setUsers(await result.json());
      }
    });
  }, []);

  return (
    <div className={styles.main}>
      <Form person={person} users={users} setPerson={setPerson}></Form>
      <List lists={lists} users={users}></List>
    </div>
  );
};

export default Experiment;
